<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <caption>
            <p>
                姓名：<input type="text" id="name" size="5">
                科目：<input type="text" id="subject" size="5">
                成绩：<input type="text" id="score" size="5">
                <button id="btn">添加学员信息</button>
            </p>
        </caption>

        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }, {
            name: '蚂蚱',
            subject: 'JavaScript',
            score: 10
        }, {
            name: '蝗虫',
            subject: 'JavaScript',
            score: 100
        }];

        // 获取元素
        const tbody = document.querySelector('tbody');
        const btn = document.querySelector('#btn');

        // 数据遍历
        for (let i = 0; i < datas.length; i++) {
            // 创建行
            let tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 创建列
            for (let k in datas[i]) {
                let td = document.createElement('td');
                tr.appendChild(td);
                // 填充数据
                td.innerHTML = datas[i][k];
            }

            // 创建管理选项
            let td = document.createElement('td');
            td.innerHTML = `<a href="javascript:;" title="删除" data-action="del">删除</a> <a href="javascript:;" title="编辑" data-action="edit">编辑</a></td>`;
            tr.appendChild(td);
        }

        // 添加学员
        btn.onclick = function () {
            let name = document.querySelector('#name');
            let subject = document.querySelector('#subject');
            let score = document.querySelector('#score');
            // 非空验证
            if (name.value == '')
                return alert('姓名不能为空');
            if (subject.value == '')
                return alert('科目不能为空');
            if (score.value == '')
                return alert('分数不能为空');
            // 创建行
            let tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 创建列
            let arr = [];
            arr.push(`<td>${name.value}</td>`);
            arr.push(`<td>${subject.value}</td>`);
            arr.push(`<td>${score.value}</td>`);
            arr.push(`<td><a href="javascript:;" title="删除" data-action="del">删除</a> <a href="javascript:;" title="编辑" data-action="edit">编辑</a></td>`);
            // 填充内容
            tr.innerHTML = arr.join('');
        }

        // 事件监听
        tbody.addEventListener('click', function (e) {
            let action = e.target.getAttribute('data-action');
            // 删除
            if (action == 'del') {
                e.target.parentNode.parentNode.remove();
            }
            // 编辑
            if (action == 'edit') {
                // 获取元素
                let td = e.target.parentNode.parentNode.children[e.target.parentNode.parentNode.children.length - 2];
                // 如果有元素节点，表明输入框已生成，返回
                if (td.children.length)
                    return;
                let score = +td.innerHTML;
                // 编辑框
                td.innerHTML = `<input type="text" value="${score}" data-score="${score}" size="8"> <button data-action="save">保存</button><button data-action="cancel">取消</button>`
            }
            // 保存
            if (action == 'save') {
                let td = e.target.parentNode.parentNode.children[e.target.parentNode.parentNode.children.length - 2];
                td.innerHTML = e.target.parentNode.children[0].value;
            }
            // 取消
            if (action == 'cancel') {
                let td = e.target.parentNode.parentNode.children[e.target.parentNode.parentNode.children.length - 2];
                td.innerHTML = e.target.parentNode.children[0].getAttribute('data-score');
            }
        });
    </script>
</body>

</html>